<template>
	<view>
		<view v-if="type==0" style="background-color: #f9cb3d;" >
			<ttBar leftIcon="icon-back" title=" " bgColor="rgba(0,0,0,0)" :showZhanwei="false"></ttBar>
			<image class="bg" src="http://s.de123.com/teamBg.png" mode="widthFix"></image>
			<view class="box">
				<image src="http://s.de123.com/teamTitle.png" mode="widthFix"></image>
				<view class="row">
					<text class="iconfont icon-qiandai"></text>
					<view class="info">
						<text>自己赚钱</text>
						<text>自己购买商品获得返利</text>
					</view>
				</view>
				<view class="row">
					<text class="iconfont icon-ditu-zhishipai"></text>
					<view class="info">
						<text>专业指导</text>
						<text>手把手教学和经验分享</text>
					</view>
				</view>
				<view class="row">
					<text class="iconfont icon-qianbao"></text>
					<view class="info">
						<text>分享好友圈赚钱</text>
						<text>好物分享给更多人赚的更多</text>
					</view>
				</view>
				<input type="text" placeholder="请填写邀请码" v-model="code" />
			</view>
			<view class="btmOp" ><button @tap="joinTeam">立即加入</button></view>
		</view>
		
		<view v-if="type==1" class="joined">
			<ttBar leftIcon="icon-back" title="加入合伙人"  ></ttBar>
			<view class="sucessBox">
				<text class="iconfont icon-yuanxingxuanzhongfill"></text>
				<text>恭喜您加入合伙人</text>
			</view>
			<view class="pubList">
				<view class="row">
					<image src="../../static/120.png"></image>
					<view class="info">
						<text>找培训公众号</text>
						<text>复制添加，及时收取收益信息</text>
					</view>
					<text @tap="copyWx">复制公众号</text>
				</view>
				<view class="row">
					<image src="http://s.de123.com/wxkf.jpg"></image>
					<view class="info">
						<text>找培训官方客服</text>
						<text>复制添加，及时收取收益信息</text>
					</view>
					<text @tap="copyTel">客服</text>
				</view>
			</view>
			<view class="btmOp" ><button @tap="toPage" data-url="index">马上去赚钱</button></view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import TL from '../../common/tool.js';
export default {
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo
		})
	},
	data() {
		return {
			code: '',
			type:0
		};
	},
	methods: {
		copyWx(){
			uni.setClipboardData({
			    data:'都秀文化',
			    success: ()=>{
			       uni.showToast({
			       	title: '公众号复制成功',
			       	icon: 'none'
			       });
			    }
			});
		},
		copyTel(){
			uni.setClipboardData({
			    data:'18851638143',
			    success: ()=>{
			       uni.showToast({
			       	title: '客服电话复制成功',
			       	icon: 'none'
			       });
			    }
			});
		},
		joinTeam() {
			this.code = TL.tailCut(this.code);
			if (!this.code) {
				uni.showToast({
					title: '请输入邀请码',
					icon: 'none'
				});
			} else {
				this.$store.dispatch("apiJoinTeam",{
					userId:this.userInfo.userId,
					code:this.code
				}).then(res=>{
					if(res.data.data.code){
						uni.showToast({
							title: '绑定成功',
							icon: 'none'
						});
						this.userInfo.code=res.data.data.code;
						this.type==1;
					}
					
				})
			}
		}
	},
	onLoad() {
	
	}
};
</script>

<style lang="less">
.bg {
	width: 100%;
}
.sucessBox{
	border-top: 1px solid #f6f6f6;
	display: flex;
	height: 200upx;
	align-items: center;
	justify-content: center;
	text{
		font-size: 36upx;
	}
	.iconfont{
		color:#56cb45;
		font-size: 60upx;
		margin-right: 20upx;
	}
}
.pubList {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	padding: 32upx 22upx;
	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		background-color: #fcf3e7;
		border-radius: 15rpx;
		padding: 30upx 20upx;
		margin-bottom: 20upx;
		image {
			width: 90upx;
			height: 90upx;
			border-radius: 50%;
			flex-shrink: 0;
		}
		.info {
			display: flex;
			flex-direction: column;
			text:first-child {
				font-size: 32upx;
				color: #202932;
			}
			text:last-child {
				font-size: 24upx;
				color: #65696d;
			}
		}
		> text {
			height: 60upx;
			width: 200upx;
			border-radius: 30upx;
			color: #ffffff;
			background-color: #ffb423;
			font-size: 28upx;
			text-align: center;
			line-height: 60upx;
		}
	}
}
.box {
	position: relative;
	z-index: 2;
	margin: -80upx 24upx 0 24upx;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #fff4df;
	border-radius: 30upx;
	padding: 50upx 30upx;
	image {
		width: 80%;
		margin-bottom: 40upx;
	}
	.row {
		display: flex;
		width: 100%;
		background-color: #ffffff;
		box-shadow: 0rpx 2rpx 9rpx 0rpx rgba(230, 175, 134, 0.2);
		border-radius: 20upx;
		padding: 30upx 60upx;
		margin-bottom: 30upx;
		.iconfont {
			width: 82upx;
			height: 82upx;
			border-radius: 50%;
			color: #ffffff;
			background: linear-gradient(-10deg, #ff6d4a 0%, #ff996d 100%);
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(250, 125, 108, 0.6);
			flex-shrink: 0;
			text-align: center;
			line-height: 82upx;
			font-size: 50upx;
			margin-right: 50upx;
		}
		.info {
			display: flex;
			flex-direction: column;
			text:first-child {
				font-size: 32upx;
			}
			text:last-child {
				font-size: 28upx;
				color: #f3a056;
			}
		}
	}
	input {
		background-color: #ffffff;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		box-shadow: 0rpx 2rpx 9rpx 0rpx rgba(230, 175, 134, 0.2);
		width: 100%;
		text-align: center;
		font-size: 32upx;
		color: #e7bc96;
		margin-bottom: 120upx;
	}
}
.btmOp {
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120upx;
	padding: 0 60upx;
	background-color: #ffffff;
	z-index: 5;
	button {
		height: 80upx;
		line-height: 80upx;
		background-color: #f84f4c;
		width: 100%;
		color: #ffffff;
		border-radius: 40upx;
	}
}
.joined{
	.btmOp button{
		background-color: #ffb423;
	}
}
</style>
